<template>
  <div>
    <div class="input">
      <form action="/">
        <van-search
          v-model="value"
          show-action
          placeholder="请输入小区或地址"
          @search="onSearch"
          @cancel="onCancel"
        >
          <template #action>
            <div @click="onSearch">
              <van-icon name="location-o" size="25" color="#ffffff" />
            </div>
          </template>
          <template #left>
            <div @click="onSearch">
              <van-icon name="arrow-left" size="25" color="#ffffff" />
            </div>
          </template>
          <template #left-icon>
            <div @click="onSearch"><van-icon name="arrow-down" /></div>
          </template>
        </van-search>
      </form>
    </div>
    <div class="house-info">
      <div class="left"><img src="../assets/login.png" alt="" /></div>
      <div class="right">
        <p class="title">666</p>
        <p class="info">777</p>
        <p class="youdian">888</p>
        <p class="price">999</p>
      </div>
    </div>
  </div>
</template>

<script>
import { Toast } from 'vant'

export default {
  data () {
    return {
      value: ''
    }
  },
  created () {
    this.getDetial()
    console.log(666)
  },
  methods: {
    onSearch (val) {
      Toast(val)
    },
    onCancel () {
      Toast('取消')
    },
    async getDetial () {
      const res = await this.$http.get('/houses')
      console.log(res)
    }
  }
}
</script>

<style lang="less">
.input {
  width: 100%;
  height: 60px;
  background-color: #4fc08d;
}
.house-info {
  display: flex;
  width: 100%;
  height: 116px;
  background-color: #4fc08d;
  margin-top: 50px;
  padding: 10px 16px;
  p {
    margin: 0;
  }
  img {
    width: 106px;
    height: 80px;
    margin-right: 20px;
  }
}
.right {
  .title {
    color: #000;
    font-size: 15px;
    font-weight: 700;
  }
  .info {
    font-size: 12px;
    color: #afb2ba;
  }
  .youdian {
    font-size: 14px;
  }
  .price {
    font-size: 12px;
    color: #fa5741;
  }
}
</style>
